import React from 'react';

// 定义接口，描述组件的属性类型
interface SectionListProps {
    sections: string[]; // 字符串数组，所有章节的名称
    activeSection: string; // 当前活动章节的名称，用于高亮显示
    onSectionMouseEnter: (section: string) => void; //回调函数，当鼠标悬停在某个章节上时被调用，传递当前章节的名称，以便外部组件可以进行响应（如更新状态或展示更多信息）
}

// 定义SectionList组件，接收SectionListProps类型的属性
const SectionList: React.FC<SectionListProps> = ({ sections, activeSection, onSectionMouseEnter }) => (
    <ul> {/* 无序列表容器 */}
        {sections.map((section) => ( // 遍历所有章节
            <li
                key={section} // 使用章节名称作为唯一键
                className={`section ${activeSection === section ? 'active' : ''}`} // 根据activeSection决定是否添加active类,是否进行高亮显示
                onMouseEnter={() => onSectionMouseEnter(section)} // 鼠标进入时调用回调函数实现交互效果
            >
                {section} {/* 显示章节名称 */}
            </li>
        ))}
    </ul>
);
// SectionList 组件用于显示一个章节列表，每个章节名称以无序列表的形式呈现。当鼠标悬停在某个章节上时，会调用 onSectionMouseEnter 回调函数，传递当前章节的名称，以便外部处理交互

export default SectionList; 
